﻿@using System.Web.Optimization
@using KRM.Core
@model KRM.Core.tblbanner
@{
    IEnumerable<tblbanner> subBanner = ViewBag.SubBanner;
    var viewProduct = "";
    var playVideo = "";
    var hfviewproduct = "";
    var hfplayvideo = "";
    if (subBanner.Any())
    {
        foreach (var item in subBanner)
        {
            if (item.ProductId > 0)
            {
                playVideo = "position: absolute; " + item.InlineCss;
                hfplayvideo = item.InlineCss;
            }
            else
            {
                viewProduct = "position: absolute; " + item.InlineCss;
                hfviewproduct = item.InlineCss;
            }
        }
    }
}
<html>
<head>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/js")

    <script src="~/js/intranet.js"></script>

</head>
<body>

    <script>
        $(document).ready(function () {
            BannerManager.init();
            $(".datepicker").datepicker();
        });
    </script>
    <style type="text/css">
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

        .ui-timepicker-div dl { text-align: left; }

        .ui-timepicker-div dl dt { float: left; clear: left; padding: 0 0 0 5px; }

        .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }

        .ui-timepicker-div td { font-size: 90%; }

        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl { direction: rtl; }

        .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }

        .ui-timepicker-rtl dl dt { float: right; clear: right; }

        .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
    </style>
    <div class="border-padding10" style="margin: 20px">
        <div class="row-fluid">
            <div class="span2 text-right">Store</div>
            <div class="span3">@Html.DropDownList("StoreID", null, new { @class = "input-block-level" })</div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right">Type</div>
            <div class="span3">
                <select class="input-block-level ddlType" id="ddlType">
                    <option value="Home" @(Model.Type == "Home" ? "selected=selected" : "")>Home</option>
                    <option value="Category" @(Model.Type == "Category" ? "selected=selected" : "")>Category</option>
                    <option value="Product" @(Model.Type == "Product" ? "selected=selected" : "")>Product</option>
                </select>
            </div>
        </div>
        <div class="row-fluid catList" style="display: none">
            <div class="span2 text-right">
                Category
            </div>
            <div class="span3">
                <select id="ddlCategory" class="ddlCategory input-block-level">
                </select>
            </div>
            <div class="span1"><span class="loaddrop"></span></div>
        </div>
        <div class="row-fluid productList" style="display: none">
            <div class="span2 text-right">
                Product
            </div>
            <div class="span3">
                <select id="ddlProduct" class="ddlProduct input-block-level">
                </select>
            </div>
            <div class="span1"><span class="loaddrop"></span></div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right">Title</div>
            <div class="span3">
                <input type="text" id="title" class="input-block-level" value="@Model.Title" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right">Link</div>
            <div class="span3">
                <input type="text" id="link" class="input-block-level" value="@Model.Link" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right">Start Date</div>
            <div class="span3">
                <input type="text" id="StartDate" class="input-block-level datepicker" value="@Model.StartDate" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right">End Date</div>
            <div class="span3">
                <input type="text" id="EndDate" class="input-block-level datepicker" value="@Model.EndDate" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2 text-right"></div>
            <div class="span10">
                *Note* when naming files use the following naming convension: Filename-Pagename-Date
            </div>
        </div>
        <form action="/intranet/bannerupload" method="POST" id="fr-bannerupload" enctype="multipart/form-data">
            <input type="hidden" name="storename" id="hf-storename" />
            <div class="row-fluid">
                <div class="span2 text-right">Image</div>
                <div class="span9">
                    <input type="file" name="image" id="ipImage" style="display: none" />
                    <button type="button" class="btn btn-success" onclick="$('#ipImage').click()"><i class="icon-plus"></i>Add file...</button>
                    <input type="submit" class="btn btn-primary" value="Upload" />
                    <button class="btn btn-danger delete-image" type="button">
                        <i class="icon-trash icon-white"></i>Delete
                    </button>
                </div>
            </div>
        </form>
        <fieldset class="tool-box">
            <legend>Tool</legend>
            <div class="row-fluid ">
                <div class="view-product img-content">
                    <img id="Tool1_ViewProduct" src="/img/img-view-product.png" alt="View Product">
                </div>
                <div class="play-video img-content">
                    <img id="Tool1_PlayVideo" src="/img/img-play-video.png" alt="Play Video">
                </div>
            </div>
        </fieldset>
        <div class="banner control" style="margin: 10px; position: relative; overflow: hidden;">
            <img src="@Model.ImageUrl" alt="" id="imgBanner" class="imgBanner"/>
            @if (viewProduct != "")
            {
                <div style="@viewProduct" class="ui-draggable" id="view-product">
                    <img class="del" src="/img/del.png" />
                    <img class="view" src="/img/img-view-product.png" alt="" runat="server" id="imgViewProduct" />
                </div>
            }
            else
            {
                <div style="position: absolute; top: 0; left: 0;" class="ui-draggable" id="view-product">
                    <img class="del" src="/img/del.png" />
                    <img src="/" alt="" class="view" runat="server" id="imgViewProductEmpty" />
                </div>
            }
            @if (playVideo != "")
            {
                <div style="@playVideo" class=" ui-draggable" id="play-video">
                    <img class="del" src="/img/del.png" />
                    <img class="play" src="/img/img-play-video.png" alt="" id="imgPlayVideo" />
                </div>
            }
            else
            {
                <div style="position: absolute; top: 0; left: 0;" class="ui-draggable" id="play-video">
                    <img class="del" src="/img/del.png" />
                    <img class="play" src="/" alt="" id="imgPlayVideoEmpty" />
                </div>
            }
        </div>
        <div class="form-actions">

            <input type="button" id="btnSave" value="Save changes" class="btn btn-primary" />
            <input type="button" id="btnCancel" value="Cancel" class="btn" />
            <input type="hidden" class="hidViewProduct" id="hidViewProduct" value="@hfviewproduct" />
            <input type="hidden" class="hidPlayVideo" id="hidPlayVideo" value="@hfplayvideo" />
            <input type="hidden" class="hidImageURL" id="hidImageURL" />
            <input type="hidden" class="productId" id="productId" value="@Model.ProductId" />
            <input type="hidden" class="hidCategoryID" id="hidCategoryID" runat="server" value="@Model.CatId" />
            <input type="hidden" class="hidBannerId" id="hidBannerId" runat="server" value="@Model.Id" />
            <span id="messagebox" style="color: red"></span>
            <input type="hidden" id="hidStoreName" class="hidStoreName" runat="server" />
        </div>
    </div>
    <div class="row-fluid" id="over-popup">
    </div>

    <div class="row-fluid" id="save-ajax">
        <div class="span3 loader">
            <img src="/img/save-loader.gif" />
        </div>
    </div>
</body>
</html>
